<template>
  <div class="hot">
    <div class="hottop animate__animated animate__backInLeft">
      <div class="hotpct">
        <div class="hoticon"></div>
        <div class="updatatime">
          <span>更新日期：</span>
          <span>{{updataTime}}</span>
        </div>
      </div>
    </div>
    <!-- 热歌单 -->
    <newMusic ></newMusic>
    <!-- :ishot="true" -->
  </div>
</template>

<script>
import newMusic from "@/components/recommend/newMusic.vue/";
import { hotsong } from "@/api/hot";
// import { newsong } from "@/api/recommend";
export default {
  components: {
    newMusic,
  },
  data() {
    return {
      updataTime: "",
    };
  },
  created: function () {
    hotsong().then((res) => {
      // console.log(res.data.playlist.updateTime);
     this.updataTime=new Date(Number(res.data.playlist.updateTime)).toLocaleString().slice(5, -9).replace("/", "月").trim() + "日";
    });
  },
};
</script>
<style lang="scss" scoped>
.hot {
  .hottop {
    background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=)
      no-repeat;
    position: relative;
    overflow: hidden;
    background-size: contain;
    padding-top: 38.9%;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .hotpct {
      padding-left: vw(40);
      box-sizing: border-box;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      .hoticon {
        background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
          no-repeat;
        background-size: vw(320) vw(200);
        background-position: vw(-40) vw(-50);
        width: vw(320);
        height: vw(160);
        margin-top: vw(40);
      }
      .updatatime {
        margin-top: vw(10);
        color: hsla(0, 0%, 100%, 0.8);
        font-size: vw(12);
      }
    }
  }
}
</style>